<template>
  <div class="allOrderContainer">
    <!-- 订单操作 -->
    <div class="actions">
      <div class="left">
        <el-button type="primary" plain size="mini" data-tracker="P44-1" @click="shippingcustomerFn" style="margin:0px 10px 10px 0px"><i class="el-icon-plus"></i> 新增</el-button>
        <el-button type="primary" plain size="mini" data-tracker="P44-2" @click="BatchDeleteFn" style="margin:0px 10px 10px 0px"><i class="el-icon-delete"></i> 删除</el-button>
        <el-button type="primary" plain size="mini" data-tracker="P44-3" style="margin:0px 10px 10px 0px"><i class="el-icon-s-release"></i> 停用</el-button>
        <el-button type="primary" plain size="mini" data-tracker="P44-4" style="margin:0px 10px 10px 0px"><i class="el-icon-s-claim"></i> 启用</el-button>
      </div>
      <!-- <div class="center">
        <el-button type="primary" plain size="mini" @click="toLead"
          >导入</el-button
        >
        <el-button type="primary" plain size="mini">导出</el-button>
      </div> -->
      <div class="right">
        <el-pagination small :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 表格展示部分 -->
    <div class="displayArea">
      <el-table :data="tableData" border @selection-change="handleSelectionChange" style="width: 100%" stripe>
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="报价名称"> </el-table-column>
        <el-table-column prop="product_type" label="产品类型">
        </el-table-column>
        <el-table-column prop="effectivetime" label="有效时间">
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="text" size="mini" data-tracker="P44-5" @click="handleDetail(scope.row)">详情</el-button>
            <el-button type="text" size="mini" data-tracker="P44-6" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" data-tracker="P44-7" @click="pricePageFn(scope.row.id)">价格</el-button>
            <el-button size="mini" type="text" data-tracker="P44-8" @click="discountFn(scope.row)">折扣/上浮</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <AddShippping :ShippingcustomerFlag = "ShippingcustomerShow" @parentFlagShow = "parentFlagShowFn"></AddShippping> -->
    <!-- <EditShippping
      :editPopshowFlag="editPopshow"
      @parentFlagEditShow="parentFlagEditShowFn"
    ></EditShippping> -->
    <el-drawer title="新增计费产品" :wrapperClosable="false" :visible.sync="ShippingcustomerShow" :direction="direction" :before-close="handleClose" size="40%">
      <div style="padding: 0 20px" class="form_content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <div class="color_bg">
            <el-form-item label="报价名称">
              <el-input v-model="ruleForm.quotename" placeholder="报价名称"></el-input>
            </el-form-item>
            <el-form-item label="产品类型">
              <el-select v-model="ruleForm.productData_type" placeholder="产品类型">
                <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="footer_shipping">
        <div style="margin: 0 auto;text-align: center;">
          <el-button
            id="orderSave"
            type="primary"
            plain
            size="mini"
            @click="openFullScreen"
            v-loading.fullscreen.lock="fullscreenLoading"
            >保存</el-button
          >
          <el-button id="orderCancel" @click="ShippingcustomerShow = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-drawer title="编辑计费产品" :wrapperClosable="false" :visible.sync="editPopshow" :direction="direction" :before-close="handleCloseEdit" size="40%">
      <div style="padding: 0 20px" class="form_content">
        <el-form :model="ruleFormEdit" :rules="rulesEdit" ref="ruleFormEdit" label-width="100px" class="demo-ruleForm">
          <div class="color_bg">
            <el-form-item label="报价名称">
              <el-input v-model="ruleFormEdit.quoteEdit_name" placeholder="报价名称"></el-input>
            </el-form-item>
            <el-form-item label="产品类型">
              <el-select v-model="ruleFormEdit.productEdit_type" placeholder="产品类型">
                <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="footer_shipping">
        <div style="margin: 0 auto">
          <el-button id="orderSave" type="primary" plain size="mini" @click="EditerFullScreen" v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
          <el-button id="orderCancel" @click="ShippingcustomerShow = false">取消</el-button>
        </div>
      </div>
    </el-drawer>
    <el-drawer title="计费产品详情" :wrapperClosable="false" :visible.sync="DetailPopshow" :direction="direction" :before-close="handleCloseDetail" size="40%">
      <div style="padding: 0 20px" class="form_content">
        <el-form :model="ruleFormDetail" :rules="rulesDetail" ref="ruleFormEdit" label-width="100px" class="demo-ruleForm">
          <div class="color_bg">
            <el-form-item label="报价名称">
              <el-input v-model="ruleFormDetail.quoteDetail_name" placeholder="报价名称" disabled></el-input>
            </el-form-item>
            <el-form-item label="产品类型">
              <el-select v-model="ruleFormDetail.productDetail_type" placeholder="产品类型" disabled>
                <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
// import AddShippping from "../../components/charging/addShippingcustomer.vue";
// import EditShippping from "../../components/charging/editShippingcustomer.vue";
import {
  billingCreateFn,
  billingListFn,
  UpdateBillingQuotation,
  DetailBillingQuotation,
  DeleteBillingQuotation,
} from "@/api/billingrules";
export default {
  name: "shippingcustomer",
  // components: { AddShippping, EditShippping }, //
  data() {
    return {
      ShippingcustomerShow: false,
      editPopshow: false,
      DetailPopshow: false,
      selectAreaVisible: true, //这个是筛选那一行
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 100, //一页多少条
      sortFlag: 0, //指定排序方式的
      direction: "rtl",
      fullscreenLoading: false, //loading遮罩层
      tableData: [],
      ruleForm: {
        quotename: "",
        productData_type: "",
      },
      rules: {
        quotename: [
          { required: true, message: "请输入计费产品名称", trigger: "blur" },
        ],
        productData_type: [
          { required: true, message: "请选择产品类型", trigger: "change" },
        ],
      },
      ruleFormEdit: {
        quoteEdit_name: "",
        productEdit_type: "",
      },
      rulesEdit: {
        quoteEdit_name: [
          { required: true, message: "请输入计费产品名称", trigger: "blur" },
        ],
        productEdit_type: [
          { required: true, message: "请选择产品类型", trigger: "change" },
        ],
      },
      ruleFormDetail: {
        quoteDetail_name: "",
        productDetail_type: "",
      },
      rulesDetail: {},
      options: [
        {
          value: "1",
          label: "零担",
        },
        {
          value: "2",
          label: "保温箱",
        },
        {
          value: "3",
          label: "整车",
        },
      ],
      value: "", // select表单的value值
      multipleSelection: [],
      treeListid: []
    };
  },
  computed: {},
  mounted() {
    this.BillingQuotationListFn(this.pageNum, this.pageSize);
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量删除操作
    BatchDeleteFn() {
      if (this.multipleSelection.length > 0) {
        const idsData = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          idsData.push(this.multipleSelection[i].id);
        }
        const dataId = {
          id: idsData,
        };
        DeleteBillingQuotation(dataId).then((res) => {
          if (res.code === 10000) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.BillingQuotationListFn(this.pageNum, this.pageSize);
          }
        });
      } else {
        this.$message({
          type: "warring",
          message: "请至少选中一项删除!",
        });
      }
    },
    //新增发货计费产品
    shippingcustomerFn() {
      this.ShippingcustomerShow = true;
      this.ruleForm.quotename = "";
      this.ruleForm.productData_type = "";
    },
    //确定按钮走接口
    openFullScreen() {
      const data = {
        name: this.ruleForm.quotename,
        product_type: this.ruleForm.productData_type,
      };
      billingCreateFn(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "创建计费产品成功",
            type: "success",
          });
          this.ShippingcustomerShow = false;
          this.BillingQuotationListFn(this.pageNum, this.pageSize);
        }
      });
    },
    handleClose() {
      this.ShippingcustomerShow = false;
    },
    handleEdit(data) {
      this.editPopshow = true;
      this.ruleFormEdit.quoteEdit_name = data.name;
      this.ruleFormEdit.productEdit_type = data.product_type;
    },
    handleCloseEdit() {
      this.editPopshow = false;
    },
    EditerFullScreen() {
      const data = {
        name: this.ruleFormEdit.quoteEdit_name,
        product_type: this.ruleFormEdit.productEdit_type,
      };
      UpdateBillingQuotation(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "编辑计费产品成功",
            type: "success",
          });
          this.editPopshow = false;
          this.BillingQuotationListFn(this.pageNum, this.pageSize);
        }
      });
    },
    handleDetail(dataId) {
      this.DetailPopshow = true;
      const data = {
        id: dataId.id,
      };
      DetailBillingQuotation(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormDetail.quoteDetail_name = res.data.name;
          this.ruleFormDetail.productDetail_type = res.data.product_type;
        }
      });
    },
    handleCloseDetail() {
      this.DetailPopshow = false;
    },
    //新增回传参数函数控制显示隐藏
    // parentFlagShowFn(data){
    //     this.ShippingcustomerShow = data
    // },
    //编辑按钮回传参数函数控制显示隐藏
    // parentFlagEditShowFn(data) {
    //   this.editPopshow = data;
    // },

    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.SignatureListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.SignatureListFn(this.pageNum, this.pageSize);
    },
    //报价产品列表
    BillingQuotationListFn(pageNumval, pageSizeval) {
      const data = {
        page: pageNumval,
        page_size: pageSizeval,
      };
      billingListFn(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.tableData = res.data.list;
          // this.pageNum = res.data.pagination.current_page;
          // this.totalListNum = res.data.pagination.total;
          // this.pageSize = res.data.pagination.per_page_count;
        }
      });
    },
    pricePageFn(val) {
      this.$router.push({
        name: "pricepage",
        query: { activename: "first", id: val },
      });
    },
    discountFn() {
      this.$router.push({ name: "pricepage", query: { activename: "second" } });
    },
  },
};
</script>
<style lang="less" scoped>
.allOrderContainer {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;
  .orderHeader {
    background-color: #fff;
    .orderSearch {
      form {
        ::v-deep .el-form-item__label {
          font-size: 12px;
        }
        .el-textarea {
          width: 135px;
        }
      }
    }
  }
  .actions {
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    .right {
      margin: 0px 0px 10px 0px;
      ::v-deep .el-pagination {
        display: inline-block;
        .el-input--mini .el-input__inner {
          // height: 24px;
        }
      }
    }
  }
  .displayArea {
    background-color: #fff;
    overflow: auto; //显示自带的滚动条
    white-space: nowrap;
    height: 100%;
    table {
      font-size: 12px;
      border: 1px solid #cccccc;
      border-collapse: collapse;
      //排第一二三的元素加定位,然后给排第四的元素加左外边距
      th:nth-child(1),
      td:nth-child(1) {
        width: 40px;
        text-align: center;
        background-color: inherit; //继承背景颜色
        vertical-align: inherit; //设置元素的基线对齐方式
        position: absolute;
        left: 5px;
        z-index: 1;
      }
      th:nth-child(2),
      td:nth-child(2) {
        width: 40px;
        text-align: center;
        background-color: inherit;
        vertical-align: inherit;
        position: absolute;
        left: 48px;
        z-index: 1;
      }
      th:nth-child(3),
      td:nth-child(3) {
        width: 150px;
        background-color: inherit;
        vertical-align: inherit;
        position: absolute;
        left: 91px;
        z-index: 1;
      }
      th:nth-child(4),
      td:nth-child(4) {
        width: 150px;
        background-color: inherit;
        vertical-align: inherit;
        position: absolute;
        left: 245px;
        z-index: 1;
      }
      th:nth-child(5),
      td:nth-child(5) {
        margin-left: 392px;
      }
      tr {
        background-color: #fff;
        &:nth-child(even) {
          background: #e9e9e9;
        }
        th,
        td {
          border: 1px solid #cccccc;
          display: inline-block;
          width: 183px;
          height: 31px;
          line-height: 31px;
        }
        &:nth-child(2) {
          background-color: #fff !important;
        }
      }
    }
  }
}
</style>